<template>
  <div>
    <h1 style="margin-bottom: 20px">远程连接</h1>
    <div style="margin: 0 auto;">
      <el-form :model="formdata" :rules="login_rules" ref="loginForm">
        <el-form-item prop="type" label="协议类型: " label-width="120px">
          <el-select style="width: 100%;" v-model="formdata.type" @change="changeType">
            <el-option label="远程桌面RDP" value="rdp"></el-option>
            <el-option label="远程桌面VNC" value="vnc"></el-option>
            <el-option label="TELNET" value="telnet"></el-option>
            <el-option label="SSH" value="ssh"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="host" label="ip地址：" label-width="120px">
          <el-input v-model="formdata.host" placeholder=""></el-input>
        </el-form-item>
        <el-form-item prop="tcp" label="端口号：" label-width="120px">
          <el-input v-model="formdata.tcp" placeholder=""></el-input>
        </el-form-item>
        <el-form-item prop="username" label="登录用户：" label-width="120px">
          <el-input v-model="formdata.username" placeholder=""></el-input>
        </el-form-item>
        <el-form-item prop="password" label="登录密码：" label-width="120px">
          <el-input v-model="formdata.password" placeholder=""></el-input>
        </el-form-item>
      </el-form>
    </div>

    <el-button type="success" @click="connect">连接</el-button>
  </div>
</template>

<script>
  import CryptoJS from 'crypto-js'

  export default {
   props: ['connIp', ],
    name: "connectForm",
     created() {
      if (this.formdata) this.formdata.host = this.connIp
    },
    data() {
      return {
        formdata: {host: '', tcp: '5900', type: 'vnc', password: ''},
        login_rules: {
          type: [{required: true,}],
          host: [{required: true, message: '远程主机的IP地址', trigger: 'blur'},],
          tcp: [{required: true, message: 'TCP端口号', trigger: 'blur'},],
          // username: [{ required: true, message: '请输入用户名', trigger: 'blur' },],
          // password: [{ required: true, message: '请输入密码', trigger: 'blur' }, ],
        },
      };
    },

    components: {},

    computed: {},
    watch:{
     connIp(n,o){//n为新值,o为旧值
       this.formdata.host = n
     }
    },
    mounted() {

    },

    methods: {
      connect() {
        this.$refs.loginForm.validate(
          async valid => {
            if (valid) {
              var remoteInfo = {
                "connection": {
                  "type": this.formdata.type,
                  "settings": {
                    "hostname": this.formdata.host,
                    "port": this.formdata.tcp,
                    "username": this.formdata.username,
                    "password": this.aesUtilencrypt(this.formdata.password),
                    "enable-drive": true,
                    "drive-path": '/tmp',
                    "create-drive-path": true,
                    "security": "any",
                    "ignore-cert": true,
                    "enable-wallpaper": false,
                    "disable-glyph-caching": true
                  }
                }
              };
              try {
                await this.$axios.post('/api/remote/getToken', {routeInfo: remoteInfo}).then(
                  (res) => {
                    const {href} = this.$router.resolve({
                      path: '/remote_view',
                      query: {
                        token: res.data.result,
                        title: "远程主机:" + this.formdata.host,
                      }
                    })
                    window.open(href, '_blank')
                  }
                )

              } catch (e) {
                this.$message.error('连接失败')
              }

            }
          }
        )
        //var client = new Guacamole.client()

      },

      changeType(value) {
        switch (value) {
          case 'rdp':
            this.formdata.tcp = '3389';
            break;
          case 'vnc':
            this.formdata.tcp = '5900';
            break;
          case 'ssh':
            this.formdata.tcp = '22';
            break;
          case 'telnet':
            this.formdata.tcp = '23';
            break;
        }
      },
      // 加密函數
      aesUtilencrypt(word) {
        if (word instanceof Object) {
          //JSON.stringify
          word = JSON.stringify(word)
        }
        const key = CryptoJS.enc.Utf8.parse('bhyh123456789123')
        const ivHex = CryptoJS.enc.Utf8.parse("ahyh123456789123") // 偏移量
        var encryptedObj = CryptoJS.AES.encrypt(CryptoJS.enc.Utf8.parse(word), key,
          {
            iv: ivHex,
            mode: CryptoJS.mode.ECB,
            padding: CryptoJS.pad.Pkcs7,
          },
        )
        return encryptedObj.ciphertext.toString()
      },
    },

  }
</script>

<style scoped>

</style>
